<template>
  <div>
    <div class="gg_box">
      <div class="close" @click="close">
        <a-icon type="close" />
      </div>
      <h2>{{$parent.edittit}}广告</h2>

      <div class="addgg_inp">
        <ul>
          <li>
            <span class="gg_tit">
              <span class="red">*</span> 客户：
            </span>
            <a-select
              allowClear
              show-search
              option-filter-prop="children"
              :filter-option="filterOption"
              @focus="handleFocus"
              @blur="handleBlur"
              :defaultValue="gsmc==''?'请选择客户':gsmc"
              style="width: 250px"
              @change="gsmcChange"
              @search="gsmcsearch"
            >
              <a-select-option
                v-for="(item,i) in gsmcList"
                :key="i"
                :value="item.SQDWID"
                @click="gsmcclick(i)"
              >{{item.GSMC}}</a-select-option>
            </a-select>
          </li>

          <!-- <li>
            <span class="gg_tit">
              <span class="red">*</span>分类编号：
            </span>
            <a-input placeholder="请输入分类编号" />
          </li>-->
          <li>
            <span class="gg_tit">
              <span class="red">*</span> 分类名称：
            </span>
            <a-select
              show-search
              allowClear
              option-filter-prop="children"
              :filter-option="filterOption"
              @focus="handleFocus"
              @blur="handleBlur"
              :defaultValue="describe==''?'请选择分类名称':describe"
              style="width: 250px"
              @change="flChange"
            >
              <a-select-option
                v-for="(item,i) in $parent.classList"
                :key="i"
                :value="item.number"
              >{{item.describe}}</a-select-option>
            </a-select>
          </li>

          <li>
            <span class="gg_tit">图片：</span>
            <a-upload
              action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
              list-type="picture"
              style="width:250px"
              :default-file-list="fileList"
              @preview="handlePreview"
              @change="handleChange"
            >
              <a-button style="width:250px" v-if="fileList.length<1">
                <a-icon type="upload" />上传图片
              </a-button>
            </a-upload>
          </li>
          <li>
            <span class="gg_tit">广告类型：</span>
            <a-radio-group
              name="radioGroup"
              v-model="gglxrad"
              @change="gglxchange"
              :default-value="gglxrad"
            >
              <a-radio value="random">增送</a-radio>
              <a-radio value="fixed">收费</a-radio>
            </a-radio-group>
          </li>
          <li>
            <span class="gg_tit">文字广告：</span>
            <a-input placeholder="请输入文字广告" v-model="wzgg" />
          </li>
          <li>
            <span class="gg_tit">
              URL：
            </span>
            <a-input placeholder="请输入广告链接地址" v-model="ggurl" />
          </li>
          <li>
            <span class="gg_tit">截止日期：</span>
            <a-date-picker @change="dateChange" :defaultValue="moment(dateString)" />
          </li>
          <li class="sub_li">
            <a-button @click="close">取消</a-button>
            <a-button type="primary" @click="adAdminAdd">提交</a-button>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
// import headerComm from "../header-comm/header.vue";
// import gggl from "./gggl.vue";
function getBase64(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => resolve(reader.result);
    reader.onerror = error => reject(error);
  });
}
import qs from "qs";
import moment from "moment";

export default {
  inject: ["reload"],
  data() {
    return {
      fileList: [],
      classList: [],
      gsmcList: [],
      gsmcseach: "",
      flid: "",
      id: "",
      gsmcid: "",
      thumbUrl: "",
      gglxrad: "",
      wzgg: "",
      ggurl: "",
      dateString: moment(new Date()).format("YYYY-MM-DD"),
      khphone: "",
      describe: "",
      gsmc: ""
      // edittit: "新增广告",
      // tabkey: 2
    };
  },

  methods: {
    moment,
    // callback(key) {
    //   console.log(key);
    //   if (key == 1) {
    //     this.$router.push("/gggl?edittit=1");
    //   } else {
    //     this.$router.push("/addgglist?edittit=2");
    //   }
    // },
    flChange(value) {
      console.log(`selected ${value}`);
      this.flid = value;
      if (value == undefined) {
        this.flid = "";
      }
    },
    gsmcChange(value) {
      console.log(`selected ${value}`);
      // console.log(this.gsmcseach);
      if (value == undefined) {
        this.gsmcseach = "";
      }
      this.gsmcid = value;

      this.getSelectYbGsmc();
    },
    gsmcsearch(value) {
      this.gsmcseach = value;
      this.getSelectYbGsmc();
    },
    handleBlur() {
      console.log("blur");
    },
    handleFocus() {
      console.log("focus");
    },
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text
          .toLowerCase()
          .indexOf(input.toLowerCase()) >= 0
      );
    },
    close() {
      this.$parent.addgglistflag = false;
    },
    dateChange(date, dateString) {
      console.log(date, dateString);
      this.dateString = dateString;
    },
    handleCancel() {
      this.previewVisible = false;
    },
    async handlePreview(file) {
      if (!file.url && !file.preview) {
        file.preview = await getBase64(file.originFileObj);
      }
      this.previewImage = file.url || file.preview;
      this.previewVisible = true;
    },
    handleChange({ fileList }) {
      this.fileList = fileList;
      console.log(fileList);
      if (this.fileList.length == 0) {
        this.thumbUrl = "";
      }
    },
    getSelectYbGsmc() {
      this.axios
        .post(
          "yangben/SelectYbGsmc.php",
          qs.stringify({
            gsmc: this.gsmcseach
          })
        )
        .then(res => {
          console.log(res);
          if (res.data.code == 303) {
            this.gsmcList = res.data.result;
          }
        });
    },
    gglxchange() {
      console.log(this.gglxrad);
    },
    gsmcclick(key) {
      this.khphone = this.gsmcList[key].GLYSJH;
      // this.gsmcid = this.gsmcList[key].SQDWID;

      console.log(this.khphone);
    },
    adAdminAdd() {
      if (this.$parent.edittit == "新增") {
        if (this.fileList.length) {
          this.thumbUrl = this.fileList[0].thumbUrl;
        } else {
          this.thumbUrl = "";
        }
        this.axios
          .post(
            "suggest/adAdminAdd.php",
            qs.stringify({
              userid: this.gsmcid,
              number: this.flid,
              pic: this.thumbUrl,
              type: this.gglxrad,
              text: this.wzgg,
              url: this.ggurl,
              expire: this.dateString,
              phone: this.khphone
            })
          )
          .then(res => {
            console.log(res);

            if (res.data.code == 303) {
              this.$notification["success"]({
                message: "成功",
                description: res.data.msg
              });
              this.$parent.addgglistflag = false;
              this.$parent.getadAdminList(this.$parent.pagination);
            } else {
              this.$notification["error"]({
                message: "失败",
                description: res.data.msg
              });
            }
          });
      } else {
        console.log(this.fileList);
        if (this.fileList.length) {
          // this.thumbUrl = this.fileList[0].url;
          if (!this.fileList[0].url) {
            this.thumbUrl = this.fileList[0].thumbUrl;
          }
        } else {
          this.thumbUrl = "";
        }
        this.axios
          .post(
            "suggest/adAdminModify.php",
            qs.stringify({
              id: this.id,
              userid: this.gsmcid,
              number: this.flid,
              pic: this.thumbUrl,
              type: this.gglxrad,
              text: this.wzgg,
              url: this.ggurl,
              expire: this.dateString,
              phone: this.khphone
            })
          )
          .then(res => {
            console.log(res);

            if (res.data.code == 303) {
              this.$notification["success"]({
                message: "成功",
                description: res.data.msg
              });
              this.$parent.addgglistflag = false;
              this.$parent.getadAdminList(this.$parent.pagination);
            } else {
              this.$notification["error"]({
                message: "失败",
                description: res.data.msg
              });
            }
          });
      }
    }
  },
  components: {
    // headerComm,
    // gggl
  },
  created() {
    this.getSelectYbGsmc();
    // GSMC: "西安佰联网络"
    // addtime: "2020-09-23 16:12:02"
    // describe: "首页一号位"
    // expire: "2020-09-23 00:00:00"
    // file: "2020092379515105.png"
    // id: "1266"
    // key: 0
    // linkurl: "https://vip.bearing.cn"
    // number: "PCSY001"
    // phone: "15934816493"
    // px: 0
    // text: "文字广告："
    // type: "png       "
    // userid: "7401"
    if (this.$parent.edittit == "修改") {
      this.id = this.$parent.editvalue.id;
      this.flid = this.$parent.editvalue.number;
      this.describe = this.$parent.editvalue.describe;
      this.gsmcid = this.$parent.editvalue.userid;
      this.gsmc = this.$parent.editvalue.GSMC;
      this.khphone = this.$parent.editvalue.phone;
      this.thumbUrl = this.$parent.editvalue.file.trim();
      if (this.thumbUrl) {
        var file = {
          uid: " ",
          name: " ",
          status: " ",
          thumbUrl: "",
          url: "http://image.bearing.cn/advert/" + this.thumbUrl
        };
        this.fileList.push(file);
      }

      console.log(this.fileList);

      this.gglxrad = this.$parent.editvalue.type.trim();
      this.wzgg = this.$parent.editvalue.text;
      this.ggurl = this.$parent.editvalue.linkurl;
      this.dateString = this.$parent.editvalue.expire;
    } else {
      this.$parent.editvalue = "";
    }
    // console.log(this.$route.query);
    // if (this.$route.query.edittit == 1) {
    //   this.edittit = "新增广告";
    // } else {
    //   this.edittit = "修改广告";
    // }
  }
};
</script>

<style lang='less'>
.gg_box {
  position: relative;
  // top: 74px;
  text-align: left;
  background: #fff;
  // width: 98%;
  // left: 15px;
  h2 {
    font-weight: bold;
  }
  padding: 20px;
  .addgg_inp {
    padding-left: 22%;

    ul {
      li {
        margin: 20px 0;

        input {
          width: 250px;
        }
        .gg_tit {
          display: inline-block;
          width: 100px;
          text-align: right;
        }
        .red {
          color: red;
        }
        .ant-upload-list {
          width: 250px;
          margin-left: 100px;
        }
      }
      .sub_li {
        margin-left: 100px;
        button {
          margin: 0 10px;
        }
      }
    }
  }
}
</style>
